<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>下导航</title>

    <!-- <link rel="stylesheet" href="./font/iconfont.css"> -->
    <link rel="stylesheet" href="./fontzz/iconfont.css">
    <link rel="stylesheet" href="./swiper/swiper-bundle.css">
    <style>
        .icon {
          width: 1em;
          height: 1em;
          vertical-align: -0.15em;
          fill: currentColor;
          overflow: hidden;
        }
        body,ul,p{
            padding: 0;
            margin: 0;
        }
        ul{
            list-style: none;
        }
        a{
            text-decoration: none;
            color: #000;
        }
        #bnav{
            position: fixed;
            left: 0;
            bottom: 0;
            width: 100%;
            background-color: #fff;
            z-index:9;
            border-top: rgb(200, 200, 200) solid 1px;  
        }
        #body{
            margin-bottom: 50px;/*值为下导航高度*/
        }
        #bnav ul{
            display: flex;
        }
        #bnav li{
            width: 25%;
            text-align: center;      
        }
       
        #bnav svg{
            font-size: 30px;
            margin: 5px auto;
        }
        #bnav p{
            font-size: 14px;
            line-height: 22px;    
        }
        .SJM{
           display: flex;
            left: 0;
            width: 100%;
            overflow: hidden;
        }
        /* tab选项卡 */
        .tab{
           width: 100%;
           color: rgb(208, 208, 208);
           background-color: rgb(74, 74, 74);
        } 
        .tt{
           display: flex;
        }
        .tt span{
            width: 160px;
            line-height: 33px;
            text-align: center;
            font-size: 14px;
            letter-spacing: 3px;
            background-color: rgb(74, 74, 74); 
        }
        .tt  .cur{
            font-size: 22px; 
            font-weight: bold;
            color:#fff;
            margin-bottom: -1px;
            background-color: rgb(74, 74, 74);
        }
        /* .tc{
            height: 300px;
            border:1px solid #039;
          
            font-size: 60px;
            text-align: center;
            line-height: 300px;
            display: none;
        } */
        /* 搜索栏 */

        #header{
            display: flex;
            width: 100%;
        }
      
        #header div{
            flex-grow: 1;
            background-color: rgb(74, 74, 74);
            display: flex;
            color: #fff;
            border: none;
            outline: none;
            line-height: 30px;
            font-size: 14px;

        }
        #header div span{
            font-size: 12px;
            margin: 0 9px;
            line-height: 30px;
            color: #fff;
           
        }
        #header input{
            border: none;
            outline: none;
            background-color: rgb(70, 70, 70);
            line-height: 30px;
            flex-grow: 1;
            border-radius: 18px;
            font-size: 14px;
        }
        ::-webkit-input-placeholder{
            color: #fff;
        } 
      /* swiper */
      .lei img{
            width:95%; 
        }
        .swiper{
            text-align: center;
            background-color: rgb(74, 74, 74); 
        }
        /* 中间图标 */
        .TB{
            display: flex;
            width: 100%;
            text-align: center;
            margin-top: 11px;

        }

        .PH{
            width: 70%;
            border-right: solid 1px #000;

        }
        .HX{ 
            width: 80%;
            border-right: solid 1px #000;
        }
        .HD{
            width: 90%;
            border-right: solid 1px #000;
    
        }
        .HD span{
            font-weight: bold;
        }
        .MF{
            width: 70%;
        }
        .TPK{
            width: 100%;
            display: flex;
            margin-top: 11px;
            font-size: 14px;
            text-align: center;
        }
        .TPK img{
            width: 168px;
            height: 220px;
        }
        .ZZ{
            margin-left: 8px;
            text-align: center;
        }
        .RR{
            padding-left: 8px;
            text-align: center;

        }
        .TPK span{
            float: right;
        }
        



       
        </style>

    <script src="./swiper/swiper-bundle.min.js">  </script>

    <script src="./fonts-四级项目/iconfont.js"></script>
</head>
<body>

    <img  class="SJM"src="./图片/1.png"> 

    <header id="header">
        <div >
            <span class="iconfont icon-sousuo"></span>
            <input type="text" placeholder="灵能百分百">
        </div>

        <div>
            <span class="iconfont icon-fenlei"></span>
            分类

        </div>
        </header>
    

 <div class="tab">
        <div class="tt">
            <span class="cur">热门</span>
            <span>推荐</span>
            <span>女生</span>
            <span>男生</span>
            <span>有声漫</span>
        </div>
    
    </div>
 

    <div class="swiper lei">
        <div class="swiper-wrapper">
          <div class="swiper-slide"><img src="./图片/aa.webp"></div>
          <div class="swiper-slide"><img src="./图片/bb.webp"></div>
          <div class="swiper-slide"><img src="./图片/ee.webp"></div>
          <div class="swiper-slide"><img src="./图片/rr.webp"></div>  
        </div>
        <div class="swiper-pagination"></div>
      </div>


      <div class="TB">
      <div class="PH">
        <span class="iconfont icon-goldcup"></span>
        排行
      </div>
      <div class="HX">
        <span class="iconfont icon-jiarehuoyan-xianxing"></span>
        绘星社
      </div>
      <div class="HD">
        <span class="iconfont icon-flagqizi"></span>
        活动中心
      </div>
      <div class="MF">
        <span class="iconfont icon-mianfeijieyue "></span>
        免费
      </div>
    </div>

        <div class="TPK">
    <div class="ZZ">
        <img src="./图片/yy.webp" >
        <p>火影忍者  <span class="iconfont icon-Androidgengduo"></span> </p>
  
     
    </div>
    <div class="RR">
        <img src="./图片/uu.webp" >
       <p>死神  <span class="iconfont icon-Androidgengduo"></span></p>
       
    </div>
   </div>

    <nav id="bnav">
        <ul>
            <li>
                <a href="#">
                    <span>
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-shouye1"></use>
                  </svg>
                </span>
                <p>首页</p>
            </a>
            </li>
            <li>
                <a href="#">
                    <span>
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-gouwudai"></use>
                  </svg>
                </span>
                <p>商城</p>
            </a>
            </li>
            <li>
                <a href="#">
                    <span>
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-tushuqikan"></use>
                  </svg>
                </span>
                <p>书架</p>
            </a>
            </li>
            <li>
                <a href="#">
                    <span>
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-bilibili-line"></use>
                  </svg>
                </span>
                <p>我的</p>
            </a>
            </li>
        </ul>
    </nav>

    <script >

var tab=document.querySelector(".tab");
        var tt=tab.getElementsByClassName("tt")[0];
        var span=tt.querySelectorAll("span");
        var tc=tab.getElementsByClassName("tc");
        console.log(tab,tt,span,tc);

        for(let i=0;i<span.length;i++){
            span[i].index=i; 
            span[i].onmouseover=function(){

                for(let j=0;j<span.length;j++){

                span[j].classList.remove("cur");
            }
            this.classList.add("cur");
            //this 表示正在操作的span
            //另一种写法，let变量：span[i].classList.add()

           // tc[i].style.display="block";
            tc[this.index].style.display="block";
        }

    }
    
var swiper = new Swiper(".lei", {
        slidesPerView: 1,
        spaceBetween: 2,
       
      });
    </script>

    
</body>
</html>